<style scoped>
/* 头部导航栏样式 */
.header {
    height: 80px;
    background-color: rgba(24, 144, 255, 1);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-size: 16px;
    position: relative;
}

.header a {
    color: #FFFFFF;
    width: 120px;
    font-size: 14px;
    text-align: center;
}

/* log图标css样式 */
.header span.logo {
    letter-spacing: normal;
    line-height: normal;
    text-align: left;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 26px;
    color: #FFFFFF;
    white-space: nowrap;
    text-transform: none;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: "kern";
    font-kerning: normal;
    position: absolute;
    left: 72px;
    top: 25px;
    width: 77px;
    height: 31px;
    display: flex;
}

/* 头像 */
.demo-basic {
    text-align: center;
}

.demo-basic .sub-title {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--el-text-color-secondary);
}

.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.demo-basic .block:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}

.demo-basic .block {
    flex: 1;
}

.demo-basic .el-col:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}

/* 右侧信息 */
.admin {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
}

.admin span {
    margin: 0 10px;
}

.el-button {
    border-radius: 20px;
    height: 20px;
    font-size: 12px;
    background-color: #FFFFFF;
    color: #239ffe;
}
</style>
<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header">
                <span class="logo">LOGO</span>
                <router-link to="/index/homes">首页</router-link>
                <router-link to="/home/homeschool">家校互动</router-link>
                <router-link to="/home/bureauschool">局校通知</router-link>
                <router-link to="/home/messageStatistics">消息统计</router-link>
                <router-link to="/home/userstatistics">用户统计</router-link>
                <router-link to="/home/SchoolStatistics">学校管理</router-link>
                <div class="admin">
                    <el-row class="demo-avatar demo-basic">
                        <el-col :span="12">
                            <div class="demo-basic--circle">
                                <div v-for="size in sizeList" :key="size" class="block">
                                    <el-avatar :size="size" :src="circleUrl" />
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <span>{{ id == "teacher" ? useinfo.useinfo.teacher.name : useinfo.useinfo.student.name }}</span>
                    <el-dropdown>
                        <el-button type="primary">
                            管理员<el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>个人设置</el-dropdown-item>
                                <el-dropdown-item @click="exit">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main style="background-color: #f7f7f7;">
                <router-view></router-view>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue'
import { useUseinfoStore } from '@/stores/useinfo'
import { useRouter } from 'vue-router';
import { useUseidStore } from "@/stores/useid"
import { ref } from 'vue';
var useinfo: any = useUseinfoStore()
var useid: any = useUseidStore()
var id: any = ref()
var router = useRouter()
const state = reactive({
    circleUrl:
        'https://cdn7.axureshop.com/demo/2117333/images/%E9%A6%96%E9%A1%B5/u584.png',

    sizeList: [''] as const,
})
const exit = () => {
    useinfo.remove_useinfo()
    router.push('/logins')

}
id.value = useid.useid[0]


const { circleUrl, sizeList } = toRefs(state)

</script>